$display-types: flex, block, inline, inline-block;

$direction-types: row, column;

$flex-rule-keys: justify-content, justify-items, align-content, align-items;

$flex-rules: flex-start, flex-end, center, space-between, space-around;

// string replace function
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

/**
 * @eg:
 *  .flex ==>  display: flex
 *
**/
@each $v in $display-types {
  .#{$v}{
    display: $v;
  }
}

/**
 * @eg:
 *  .row ==>  flex-direction: row
 *
**/
@each $v in $direction-types {
  .#{$v} {
    flex-direction: $v;
  }
}

/**
 * @eg:
 *  .justify-content-start ==>  justify-content: flex-start
 *  .justify-items-center ==>  justify-items: flex-start
 *  .align-items-end     ==>  align-items: flex-end
 *
**/
@each $v1 in $flex-rule-keys {
  @each $v2 in $flex-rules {
    $suffix: str-replace(str-replace($v2, 'flex-'), 'space-');
    .#{$v1}-#{$suffix} {
      #{$v1}: $v2;
    }
  }
}

.wrap {
  flex-wrap: wrap;
}
